<template>
  <div>
    <el-row>
      <el-col :span="5" :offset="4">
        <img src="../assets/logobig.png" width="200" class="cursor-pointer" @click="gotoIndex()">
      </el-col>
    </el-row>
    <el-row style="background-color: #fd7a72" class="items-center">
      <el-col :span="8" :offset="5">
        <el-image fit="fill" :src="big" style="width: 550px"></el-image>
      </el-col>
      <el-col :span="6"  :offset="1" class="mt-6 mb-6 pl-4 pr-4 bg-white rounded-2xl" style="height: 390px">
        <div class="relative flex justify-start ml-8 font-bold pt-7 pb-7">
          <div class="cursor-pointer" @click="transform=false" :class="transform?'':'text-myRed-one'">密码登录</div>
          <div class="ml-4 cursor-pointer" @click="transform=true" :class="transform?'text-myRed-one':''">邮箱登录</div>
          <div class="absolute duration-500 transform  bottom-5 bg-myRed-one h-1 w-16 rounded-md" :class="transform?'translate-x-20':''"></div>
        </div>
        <div class="ml-8 mr-8 animate__animated " :class="transform?'hidden':'animate__fadeInLeft block'">
          <el-input v-model="loginInfo.username" placeholder="邮箱/手机/用户名">
            <template #prepend>
              <el-icon>
                <Avatar/>
              </el-icon>
            </template>
          </el-input>
          <el-input v-model="loginInfo.password" class="mt-6" placeholder="请输入密码">
            <template #prepend>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
          <div class="mt-11">
            <el-switch v-model="agree" active-color="#fd7a72" active-text="记住密码"></el-switch>
            <div class="float-right cursor-pointer hover:text-myRed-one text-gray-400" style="font-size:13px;" @click="gotoRegister()">注册</div>
          </div>
          <div class="text-center mt-6 w-full">
            <el-button type="danger">登录</el-button>
          </div>
        </div>
        <div class="ml-8 mr-8 animate__animated" :class="transform?' block animate__fadeInRight':'hidden'">
           <el-input v-model="loginByEmail.email" placeholder="请输入邮箱">
             <template #prepend>
               <i class="iconfont icon-email"></i>
             </template>

           </el-input>
          <el-input v-model="loginByEmail.code" class="mt-6">
              <template #append>
                <el-button style="background-color: #fd7a72;color: white">
                  验证码
                </el-button>
              </template>
          </el-input>
          <div class="mt-11">
            <el-switch v-model="agree" active-color="#fd7a72" active-text="记住密码"></el-switch>
            <div class="float-right cursor-pointer hover:text-myRed-one text-gray-400" style="font-size:13px;" @click="gotoRegister()">注册</div>
          </div>
          <div class="text-center mt-6 w-full">
            <el-button type="danger">登录</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <div class="fixed w-full bottom-0 text-center">
      <foot/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref,Ref} from "vue";
import {useRouter,useRoute} from "vue-router";
import foot from "../views/foot.vue"
import Big from "../assets/big.png"
import {Lock} from "@element-plus/icons"
import Foot from "../views/foot.vue";
const $router = useRouter();
let transform:Ref<boolean> = ref(false)
let emailType:Ref<string> = ref('')
let emailTypes:Ref<Array<string>> = reactive(["@qq.com","@163.com"])
let loginByEmail:Ref<object> = reactive({email:'',code:''})
function gotoIndex(){
  $router.push({
    path: '/',
  })
}
function gotoRegister() {
  $router.push({
    name: 'register',
  })
}
let big: object = Big
let loginInfo: object = reactive({username: '', password: ''})
let agree: boolean = ref(false)
</script>

<style scoped>
:deep(.el-input__inner):focus {
  border-color: #fd7a72;
}
:deep(.el-input-group__append){
  width: 65px;
}
:deep(.el-button){
  width: 65px;
  padding-left: 10px;
}
:deep(.el-switch__label.is-active) {
  color: #fd7a72;
}
.animate__animated {
  --animate-duration: 500ms;
}
</style>